<template>
  <el-container>
    <el-header class="main-title">视频区域</el-header>
    <el-main>
      <video-player></video-player>
    </el-main>
    <el-footer style="padding: 0">
      <div style="background-color: #d9d9d9;display: flex;justify-content: center;align-items: center;height: 32px">区域交通违规信息</div>
      <el-row >
        <el-col :span="6" v-for="item in imgList" :key="item" style="padding: 10px;">
          <el-image :src="item.url"></el-image>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script setup>

import VideoPlayer from "@/components/VideoPlayer/index.vue";
const imgList = reactive([
  {
    url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
  },
  {
    url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
  },  {
    url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
  },  {
    url:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
  }
])
</script>

<style scoped lang="scss">
.main-title {
  display: flex;
  height: 32px;
  background-color: #d9d9d9;
  align-items: center;
  justify-content: center;
}
</style>
